<template>
  <div>
    <top></top>
    <mall-header></mall-header>
    <choose-type></choose-type>
    <div class="zonesContent">
      <Banner style="margin-top: -50px;" @open="bannerOpen" :carousel-list="carouselList">
        <div class="tip" slot="tip" slot-scope="item" v-if="item.isShow !== 'N'">
          <div class="title">{{ item.title }}</div>
          <div class="cont">{{ item.note }}</div>
        </div>
      </Banner>
      <div class="search">
        <a-input-search @search="onSearch" placeholder="输入专区名称" style="width: 200px" />
      </div>
      <div class="zons">
        <a-empty v-if="specialList.length===0" style="width: 100%;margin: 20px 0;"></a-empty>
        <template v-else>
          <div class="zons_cont" v-for="item in specialList" :key="item.id" @click="bannerOpenZone(item)">
            <img :src="item.fileUrl" alt="">
            <div class="zons_cont_text">
              <div class="name">{{ item.name }}</div>
              <!-- <div class="note">{{ item.note }}</div> -->
            </div>
          </div>
        </template>
      </div>
      <paging style="margin-top: 30px;" :total="paging.total" :current="paging.page" :show-size-changer="false" :defaultPageSize="paging.limit" @pageChange="handlePageChange" />
    </div>
    <mall-footer></mall-footer>
  </div>
</template>

<script>
import Top from '@/components/base/Top'
import MallHeader from '@/components/base/MallHeader'
import Banner from '../portal/components/Banner'
import MallFooter from '@/components/base/MallFooter'
import ChooseType from '../../components/ChooseType'
import ZoneBanner from './components/ZoneBanner'
import { querySpecialAreaPage, getCycleimgsList } from '@/api/portal'
import { pageMixin } from '@/mixins'
import Paging from '@/components/base/Paging'
export default {
  name: 'zoneList',
  mixins: [pageMixin],
  components: {
    Top,
    Banner,
    MallHeader,
    MallFooter,
    ChooseType,
    ZoneBanner,
    Paging
  },
  data () {
    return {
      carouselList: [],
      treeData: [],
      floorList: [],
      specialList: []
    }
  },
  created () {
    this.paging.limit = 20
    this.loadImgList()
    this.loadData()
  },
  methods: {
    async loadData (name) {
      let res = await querySpecialAreaPage({...this.paging, name, pid: 0, startTime: new Date().getTime(), endTime: new Date().getTime(), status: '1', sortMode: 0})
      let { records, total } = res.data || {}
      this.specialList = records
      this.paging.total = +total;
    },
    onSearch(name){
      this.paging.page = 1
      this.loadData(name)
    },
    async loadImgList () {
      let res = await getCycleimgsList({position: '2'})
      this.carouselList = res.data || [];
    },
    bannerOpen (item) {
      if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
    },
    bannerOpenZone ({id,pid}) {
      this.$router.push({
        path: '/zoneDetail',
        query: {id, pid}
      })
    },
    handlePageChange (page, pageSize) {
      this.paging.page = page
      this.paging.limit = pageSize
      this.loadData()
    }
  }

}
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #0078FE;
.tip{
  padding: 114px 96px 0;
  color: #fff;
  text-align: left;
  .title{
    font-size: 66px;
    font-weight: 700;
  }
  .cont{
    width: 440px;
    word-wrap: break-word;
    font-size: 20px;
    letter-spacing: 2px;
  }
}
.zone-top-img{
  width: 1200px;
  height: 188px;
  background-image: url("../../assets/images/login/loginBg.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto;
}

.zonesContent{
  width: $width;
  margin: auto;
  .search{
    margin-top: 20px;
    display: flex;
    flex-direction: row-reverse;
  }
}
.zons{
  margin: 0 auto;
  width: 100%;//$width;
  display: flex;
  flex-wrap: wrap;
  &_cont{
    cursor: pointer;
    width: 270px;
    margin-right: 40px;
    margin-top: 30px;
    height: 240px;
    border-radius: 10px;
    transition: transform .1s;
    position: relative;
    img{
      border-radius: 10px;
      height: 100%;
      width: 100%;
    }
    &:nth-child(4n) {
      margin-right: 0;
    }
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0px 0px 10px 0px rgba(0, 120, 254, 0.1);
    }
    &_text{
      position: absolute;
      top: 76px;
      left: 0;
      right: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      .name{
        font-size: 30px;
        letter-spacing: 2px;
        font-weight: 700;
      }
      .note{
        margin: 4px 20px;
        font-size: 14px;
      }
    }
  }
}


.pagination {
  width: $width;
  margin: 20px auto;
  padding-bottom: 20px;
}
</style>
